<template>
	<view class="center  column">
		<!-- mode="widthFix"   宽度不变高度自动变化 保持原图宽高比不变 -->
		<!-- @load="load"  当图片宅如完毕时  发布到APPservice的事件名，
		事件对象event.detail= {height：图片高度Px，width：图片宽度px} -->
		<image lazy-load  mode="widthFix" @load="load" v-for="(item,index)  in detailUrls " :key="index" :src="item"></image>
		<image lazy-load  v-if="loading" class="logding" src="../../../static/images/loading.gif"></image>
		<text v-else class="footer-text">已经到底部了 没有更多内容了 </text>
	</view>

</template>

<script>
	export default {
		props: {
			detailUrls: {
				type: Array,
				default: () => [
					'https://img9.51tietu.net/pic/2019-091404/xkzcpqitqm4xkzcpqitqm4.jpg',
				]
			}
		},
		data() {
			return {
				loading: true, // 是否加载中
			}
		},
		methods: {
			load() {
				this.loading = false //图片加载完
			}
		}
	}
</script>

<style lang="scss">
	
	image {
		width: 100%;
	}

	.logding {
		height: 90rpx;
		width: 90rpx;
		margin-top: 50rpx;
	}

	.footer-text {
		font-size: 30rpx;
		margin: 20rpx 0;
		color: #777;
	}
</style>
